import { useLocalSearchParams, useRouter } from "expo-router";
import {
  StyleSheet,
  SafeAreaView,
  ScrollView,
  View,
  Image,
  TouchableOpacity,
  Dimensions,
} from "react-native";
import { ThemedText } from "@/components/ThemedText";
import { ThemedView } from "@/components/ThemedView";
import { Colors } from "@/constants/Colors";
import { Ionicons } from "@expo/vector-icons";
import { useState } from "react";

const { width: SCREEN_WIDTH } = Dimensions.get("window");

const tabs = [
  { key: "商品", id: "goods" },
  { key: "评论", id: "comments" },
  { key: "详情", id: "details" },
  { key: "推荐", id: "recommend" },
];

export default function ProductDetail() {
  const { id } = useLocalSearchParams<{ id: string }>();
  const router = useRouter();
  const [activeTab, setActiveTab] = useState("goods");

  return (
    <SafeAreaView style={styles.container}>
      <ThemedView style={styles.content}>
        {/* 顶部导航栏 */}
        <View style={styles.header}>
          <TouchableOpacity
            style={styles.backButton}
            onPress={() => router.back()}
          >
            <Ionicons name="arrow-back" size={24} color="#333" />
          </TouchableOpacity>
          <View style={styles.tabs}>
            {tabs.map((tab) => (
              <TouchableOpacity
                key={tab.id}
                style={[styles.tab, activeTab === tab.id && styles.activeTab]}
                onPress={() => setActiveTab(tab.id)}
              >
                <ThemedText
                  style={[
                    styles.tabText,
                    activeTab === tab.id && styles.activeTabText,
                  ]}
                >
                  {tab.key}
                </ThemedText>
              </TouchableOpacity>
            ))}
          </View>
          <View style={styles.headerRight}>
            <TouchableOpacity style={styles.iconButton}>
              <Ionicons name="share-social" size={24} color="#333" />
            </TouchableOpacity>
            <TouchableOpacity style={styles.iconButton}>
              <Ionicons name="ellipsis-horizontal" size={24} color="#333" />
            </TouchableOpacity>
          </View>
        </View>

        <ScrollView style={styles.scrollView}>
          {/* 商品图片轮播 */}
          <Image
            source={{
              uri: "https://tse2-mm.cn.bing.net/th/id/OIP-C.jdP04yEoxG10mcywseQj7gAAAA?rs=1&pid=ImgDetMain",
            }}
            style={styles.productImage}
          />
          <View style={styles.imageIndicator}>
            <ThemedText style={styles.imageCount}>1/6</ThemedText>
          </View>

          {/* 商品价格信息 */}
          <View style={styles.priceSection}>
            <View style={styles.priceRow}>
              <ThemedText style={styles.currency}>¥</ThemedText>
              <ThemedText style={styles.price}>69.90</ThemedText>
              <ThemedText style={styles.originalPrice}>¥99.90</ThemedText>
            </View>
            <View style={styles.couponTag}>
              <ThemedText style={styles.couponText}>满100减20</ThemedText>
            </View>
          </View>

          {/* 商品标题 */}
          <View style={styles.titleSection}>
            <ThemedText style={styles.title}>
              澳洲谷饲牛-安格斯M3牛腱子肉 1KG 生鲜牛肉 原生态食品
            </ThemedText>
            <TouchableOpacity style={styles.collectButton}>
              <Ionicons name="heart-outline" size={20} color="#666" />
              <ThemedText style={styles.collectText}>收藏</ThemedText>
            </TouchableOpacity>
          </View>

          {/* 配送信息 */}
          <View style={styles.deliverySection}>
            <View style={styles.deliveryRow}>
              <ThemedText style={styles.deliveryLabel}>送至</ThemedText>
              <View style={styles.deliveryContent}>
                <ThemedText style={styles.deliveryText}>上海市</ThemedText>
                <Ionicons name="chevron-forward" size={16} color="#666" />
              </View>
            </View>
            <View style={styles.deliveryRow}>
              <ThemedText style={styles.deliveryTime}>
                23:00前下单，预计明天（08月08日）送达
              </ThemedText>
            </View>
          </View>

          {/* 服务说明 */}
          <View style={styles.serviceSection}>
            <View style={styles.serviceRow}>
              <ThemedText style={styles.serviceLabel}>服务</ThemedText>
              <View style={styles.serviceContent}>
                <View style={styles.serviceItem}>
                  <Ionicons name="checkmark-circle" size={14} color="#666" />
                  <ThemedText style={styles.serviceText}>急速配送</ThemedText>
                </View>
                <View style={styles.serviceItem}>
                  <Ionicons name="checkmark-circle" size={14} color="#666" />
                  <ThemedText style={styles.serviceText}>坏品包退</ThemedText>
                </View>
                <View style={styles.serviceItem}>
                  <Ionicons name="checkmark-circle" size={14} color="#666" />
                  <ThemedText style={styles.serviceText}>假一赔十</ThemedText>
                </View>
              </View>
              <Ionicons name="chevron-forward" size={16} color="#666" />
            </View>
          </View>

          {/* 参数信息 */}
          <View style={styles.paramsSection}>
            <View style={styles.paramsRow}>
              <ThemedText style={styles.paramsLabel}>参数</ThemedText>
              <View style={styles.paramsContent}>
                <ThemedText style={styles.paramsText}>
                  品牌 产地 重量 保证方式 储存温度...
                </ThemedText>
              </View>
              <Ionicons name="chevron-forward" size={16} color="#666" />
            </View>
          </View>
        </ScrollView>

        {/* 底部操作栏 */}
        <View style={styles.footer}>
          <View style={styles.footerLeft}>
            <TouchableOpacity style={styles.iconTextButton}>
              <Ionicons name="home-outline" size={24} color="#666" />
              <ThemedText style={styles.iconText}>首页</ThemedText>
            </TouchableOpacity>
            <TouchableOpacity style={styles.iconTextButton}>
              <Ionicons name="cart-outline" size={24} color="#666" />
              <ThemedText style={styles.iconText}>购物车</ThemedText>
            </TouchableOpacity>
          </View>
          <View style={styles.footerRight}>
            <TouchableOpacity style={styles.addToCartButton}>
              <ThemedText style={styles.buttonText}>加入购物车</ThemedText>
            </TouchableOpacity>
            <TouchableOpacity style={styles.buyButton}>
              <ThemedText style={styles.buttonText}>立即购买</ThemedText>
            </TouchableOpacity>
          </View>
        </View>
      </ThemedView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#f5f5f5",
  },
  content: {
    flex: 1,
  },
  header: {
    flexDirection: "row",
    alignItems: "center",
    padding: 10,
    backgroundColor: Colors.background.primary,
  },
  backButton: {
    padding: 5,
  },
  tabs: {
    flex: 1,
    flexDirection: "row",
    justifyContent: "center",
    gap: 20,
  },
  tab: {
    paddingVertical: 5,
  },
  activeTab: {
    borderBottomWidth: 2,
    borderBottomColor: Colors.primary,
  },
  tabText: {
    fontSize: 15,
    color: Colors.text.secondary,
  },
  activeTabText: {
    color: Colors.primary,
    fontWeight: "500",
  },
  headerRight: {
    flexDirection: "row",
    gap: 15,
  },
  iconButton: {
    padding: 5,
  },
  scrollView: {
    flex: 1,
  },
  productImage: {
    width: SCREEN_WIDTH,
    height: SCREEN_WIDTH,
    backgroundColor: "#f5f5f5",
  },
  imageIndicator: {
    position: "absolute",
    right: 15,
    top: SCREEN_WIDTH - 30,
    backgroundColor: "rgba(0,0,0,0.3)",
    paddingHorizontal: 10,
    paddingVertical: 2,
    borderRadius: 10,
  },
  imageCount: {
    color: "#fff",
    fontSize: 12,
  },
  priceSection: {
    backgroundColor: Colors.background.primary,
    padding: 15,
  },
  priceRow: {
    flexDirection: "row",
    alignItems: "baseline",
  },
  currency: {
    color: Colors.functional.price,
    fontSize: 16,
    fontWeight: "bold",
  },
  price: {
    color: Colors.functional.price,
    fontSize: 24,
    fontWeight: "bold",
    marginRight: 10,
  },
  originalPrice: {
    color: Colors.text.tertiary,
    fontSize: 14,
    textDecorationLine: "line-through",
  },
  couponTag: {
    marginTop: 8,
    backgroundColor: "#fff1f0",
    alignSelf: "flex-start",
    paddingHorizontal: 6,
    paddingVertical: 2,
    borderRadius: 2,
  },
  couponText: {
    color: Colors.functional.price,
    fontSize: 12,
  },
  titleSection: {
    backgroundColor: Colors.background.primary,
    padding: 15,
    flexDirection: "row",
    borderTopWidth: StyleSheet.hairlineWidth,
    borderTopColor: Colors.border.light,
  },
  title: {
    flex: 1,
    fontSize: 16,
    color: Colors.text.primary,
    lineHeight: 22,
  },
  collectButton: {
    marginLeft: 15,
    alignItems: "center",
  },
  collectText: {
    fontSize: 12,
    color: Colors.text.secondary,
    marginTop: 2,
  },
  deliverySection: {
    backgroundColor: Colors.background.primary,
    padding: 15,
    marginTop: 10,
  },
  deliveryRow: {
    flexDirection: "row",
    alignItems: "center",
    marginBottom: 8,
  },
  deliveryLabel: {
    width: 40,
    fontSize: 14,
    color: Colors.text.secondary,
  },
  deliveryContent: {
    flex: 1,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
  },
  deliveryText: {
    fontSize: 14,
    color: Colors.text.primary,
  },
  deliveryTime: {
    fontSize: 13,
    color: Colors.text.secondary,
  },
  serviceSection: {
    backgroundColor: Colors.background.primary,
    padding: 15,
    marginTop: 10,
  },
  serviceRow: {
    flexDirection: "row",
    alignItems: "center",
  },
  serviceLabel: {
    width: 40,
    fontSize: 14,
    color: Colors.text.secondary,
  },
  serviceContent: {
    flex: 1,
    flexDirection: "row",
    gap: 15,
  },
  serviceItem: {
    flexDirection: "row",
    alignItems: "center",
    gap: 4,
  },
  serviceText: {
    fontSize: 13,
    color: Colors.text.secondary,
  },
  paramsSection: {
    backgroundColor: Colors.background.primary,
    padding: 15,
    marginTop: 10,
  },
  paramsRow: {
    flexDirection: "row",
    alignItems: "center",
  },
  paramsLabel: {
    width: 40,
    fontSize: 14,
    color: Colors.text.secondary,
  },
  paramsContent: {
    flex: 1,
  },
  paramsText: {
    fontSize: 13,
    color: Colors.text.secondary,
  },
  footer: {
    flexDirection: "row",
    padding: 8,
    backgroundColor: Colors.background.primary,
    borderTopWidth: StyleSheet.hairlineWidth,
    borderTopColor: Colors.border.light,
  },
  footerLeft: {
    flexDirection: "row",
    gap: 20,
    paddingHorizontal: 10,
  },
  iconTextButton: {
    alignItems: "center",
  },
  iconText: {
    fontSize: 12,
    color: Colors.text.secondary,
    marginTop: 2,
  },
  footerRight: {
    flex: 1,
    flexDirection: "row",
    justifyContent: "flex-end",
    gap: 10,
  },
  addToCartButton: {
    backgroundColor: "#ff976a",
    paddingHorizontal: 20,
    paddingVertical: 10,
    borderRadius: 20,
  },
  buyButton: {
    backgroundColor: Colors.primary,
    paddingHorizontal: 20,
    paddingVertical: 10,
    borderRadius: 20,
  },
  buttonText: {
    color: Colors.text.light,
    fontSize: 14,
    fontWeight: "500",
  },
});
